import { forwardRef, useImperativeHandle, useRef } from 'react'

import { AssociationData } from '../../BigScreenBase/interface'
import HighFrequencyTreatmentRanking, {
  HighFrequencyTreatmentRankingRef
} from './HighFrequencyTreatmentRanking'
import RiskRanking, { RiskRankingRef } from './RiskRanking'

export type LeftProps = {
  selectedAssociationItem: AssociationData
}

export type LeftRef = {
  resize?: () => void
}

const Left = forwardRef<LeftRef, LeftProps>(
  ({ selectedAssociationItem }, ref) => {
    const riskRankingRef = useRef<RiskRankingRef>(null)
    const highFrequencyTreatmentRankingRef =
      useRef<HighFrequencyTreatmentRankingRef>(null)

    useImperativeHandle(ref, () => ({
      resize: () => {
        riskRankingRef.current?.onRefresh()
        highFrequencyTreatmentRankingRef.current?.onRefresh()
      }
    }))

    return (
      <div style={{ display: 'flex', flexDirection: 'column', rowGap: 25 }}>
        <RiskRanking entId={selectedAssociationItem.key} ref={riskRankingRef} />
        <HighFrequencyTreatmentRanking
          entId={selectedAssociationItem.key}
          ref={highFrequencyTreatmentRankingRef}
        />
      </div>
    )
  }
)

export default Left
